import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * props参数
 */
export const numberBoxProps = {
  /** modelValue */
  modelValue: {
    type: Number,
    default: 0
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 输入框宽度, 单位rpx */
  inputWidth: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 输入框高度, 单位rpx */
  inputHeight: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 最小值 */
  min: {
    type: Number,
    default: 0
  },
  /** 最大值 */
  max: {
    type: Number,
    default: 999
  },
  /** 步进值 */
  step: {
    type: Number,
    default: 1
  },
  /** 禁止操作 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 禁止输入 */
  disabledInput: {
    type: Boolean,
    default: false
  },
  /** 输入框与键盘的间距, 单位px */
  cursorSpacing: {
    type: Number,
    default: 20
  },
  /** 长按递增减 */
  longPress: {
    type: Boolean,
    default: true
  },
  /** 长按触发间隔, 单位ms */
  longPressTime: {
    type: [String, Number],
    default: 250
  }
}
export type NumberBoxProps = ExtractPropTypes<typeof numberBoxProps>

export const numberBoxEmits = {
  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',
  'change': (value: number) => typeof value === 'number'
}
export type NumberBoxEmits = typeof numberBoxEmits
